<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加删除记录</title>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th> </th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=001">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>Jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email:</td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary:</td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 1.添加
			// 2.删除
			
			$('#addEmpButton').click(function(){
				//1.收集输入的数据
				var $empName = $('#empName')
				var $email = $('#email')
				var $salary = $('#salary')
				var empName = $empName.val()
				var email = $email.val()
				var salary = $salary.val()				
				// 2.生成对应的<tr>标签结构,并插入到#employeeTable的tbody中
				$('<tr></tr>').append('<td>'+empName+'</td>').append('<td>'+email+'</td>').append('<td>'+salary+'</td>')
					.append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>').appendTo('#employeeTable>tbody')
					.find('a').click(clickDelete)
				// 3.清除输入
				$empName.val('')
				$email.val('')
				$salary.val('')
			})
			
			// 给所有删除链接绑定点击监听
			$('#employeeTable a').click(clickDelete)
			// 通过table实现对所有a的click事件委托
			// $('#employeeTable').delegate('a','click',clickDelete)
			 
			// 点击删除的回调函数
			function clickDelete(){
				var $tr=$(this).parent().parent()
				var name=$tr.children(':first').html()
				if(confirm('确定删除'+name+'吗?')){
					$tr.remove()
				}			
				return false
			}
		</script>
	</body>
</html>
